<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖</title>
  <script src="./node_modules/lodash/lodash.js"></script>
</head>
<body>
  
   <!-- 防抖：前面所有的操作失效，在规定时间内只执行最后一次操作
        理解：卡顿现象是因为浏览器处理不过来，处理不过来浏览器就会慌，手就不自觉会抖动
        这是卡顿的一个结果，而防抖是通过减少负担(只处理最后一次)来处理的
   -->
   请输入：<input type="text">
   <script type='text/javascript'>
       /**
        * querySelector选择器查询，用于查询第一个匹配的元素，一般用于只查询一个元素
        * querySelectorAll才是返回所有匹配的元素，通常是个List，用于区分
        * */ 
       let input = document.querySelector('input')

       /**
        * lodash暴露的是一个下划线 _ 对象，它有个方法debounce(顾名思义，防止跳动)
        * 参数一为对哪个回调进行防抖
        * 参数二为处理防抖要花多长时间(预留时间来缓冲一下，还是为了降低压力，减轻负担)
        * */ 
       input.oninput = _.debounce(()=>{
           console.log('1s后执行防抖');
       },1000)
   </script>
</body>
</html>